<script>
  import $ from 'dfish-widget'
  import Fileupload from './Fileupload.vue'

  export default {
    mixins: [Fileupload],
    data() {
      return {
        name: 'Mediaupload',
        remark: '上传视频',
        deprecate: 'item-width,validate-default,vertical',
        examples: [{
          remark: '',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-mediaupload name="file" :model-value="fileList" thumbnail-width="100" thumbnail-height="100" file-types="*.mp4" @click:item="clickItem">
              </w-mediaupload>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    fileList: [
                      {id: '001', name: '230827.mp4', thumbnail: 'https://wx3.sinaimg.cn/orj360/679ca86egy1hhf7agcbqhj22kg1qonoi.jpg', url: 'https://dfish.rongji.com/230827.mp4'},
                    ]
                  }
                },
                methods: {
                  clickItem(e, item) {
                    $.previewVideo(item.url)
                  }
                }
              }
            </${'script'}>
            `,
          comp: {
            data() {
              return {
                fileList: [
                  {id: '001', name: '230827.mp4', thumbnail: 'https://wx3.sinaimg.cn/orj360/679ca86egy1hhf7agcbqhj22kg1qonoi.jpg', url: 'https://dfish.rongji.com/230827.mp4'},
                ]
              }
            },
            methods: {
              clickItem(e, item) {
                $.previewVideo(item.url)
              }
            }
          }
        },
        ]
      }
    },
    created() {
      this.merge([{
          name: 'show-file-name',
          type: 'Boolean',
          remark: '是否显示文件名',
        },
        {
          name: 'thumbnail-width',
          type: 'String / Number',
          remark: '缩略图宽度',
          default: '80',
        },
        {
          name: 'thumbnail-height',
          type: 'String / Number',
          remark: '缩略图高度',
          default: '80',
        },
        {
          name: 'file-types',
          default: 'video'
        },
      ], 'attrs')
    }
  }
</script>

<style>
</style>
